<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 200px;
          height: 200px;
          background-color: khaki;
        }
        .mask {
          /* 从上到下，黑色从完全可见到完全不可见的透明渐变 */
          mask-image: linear-gradient(#000, transparent);
          /* 默认值，写和不写效果都一样 */
          mask-mode: alpha; /* 完全部透明区可见，完全透明区不可见 */
        }
      </style>
      <div class="box mask"></div>
</body>
</html>